<template>
  <div>
    <div className="shop">
      <div className="text-area">
        <div
          ref="editorElemMenu"
          style="backgroundColor: '#f1f1f1'; border:'1px solid #ccc'"
          className="editorElem-menu"
        ></div>
        <div
          style="height: 300;border: '1px solid #ccc',borderTop: 'none'"
          ref="editorElemBody"
          className="editorElem-body"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, defineComponent, ref } from "vue";
import { file } from "@/api/api.js";
import { Toast } from "vant";

import E from "wangeditor";

export default defineComponent({
  name: "Editor",
  components: {},
  props: {
    options: Object,
    value: String,
  },

  //   emits: ["onEditor"],
  setup(props, { emit }) {
    const editorElemMenu = ref();
    const editorElemBody = ref();
    // const data: DataProps = reactive({
    const data = reactive({
      editorContent: "",
      editor: {},
      getContent: () => {
        console.log("111", props);
        data.editor.txt.html(props.value);
      },
    });

    onMounted(() => {
      //   let _this = this;
      const elemMenu = editorElemMenu.value;
      const elemBody = editorElemBody.value;
      data.editor = new E(elemMenu, elemBody);

      // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
      data.editor.config.onchange = (html) => {
        console.log(html);
        data.editorContent = data.editor.txt.html();
        // 向外部返回一个处理过的值
        emit("on-editor", data.editor.txt.html());
        emit("update:value", data.editor.txt.html());
      };

      //   data.editor.config.customUploadImg = function(files: any, insert: any) {
      data.editor.config.customUploadImg = async (files, insert) => {
        // files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法
        // let file;
        // if (files && files.length) {
        //     file = files[0];
        // } else {
        //     return
        // }
        // 图片上传

        console.log("files1", files);

        const formData = new FormData();
        formData.append("file", files[0]);
        console.log("files", files, insert);
        const { data: res } = await file.update(formData, {
          headers: {
            "Content-Type": "multipart/form-data;",
          },
        });
        console.log(res);
        if (res.status != 0) return Toast.fail("上传失败!请稍后重试");
        // 把请求服务器地址获得的图片链接，替换到下面src里面即可
        data.editor.txt.append(`<img src='${res.data.url}' />`);
        // data.editor.txt.append(
        //   "<img src='https://rmxgh-1305579889.cos.ap-beijing.myqcloud.com/img/64bec1a86509170772c19fc5f88d84e1.jpg' />"
        // );
      };
      //   自定义上传图片的接口
      //   data.editor.config.customUploadImg = function(files, insert) {
      //     // files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法
      //     // let file;
      //     // if (files && files.length) {
      //     //     file = files[0];
      //     // } else {
      //     //     return
      //     // }
      //     // 图片上传
      //     console.log("files1", files);
      //     const formData = new FormData();
      //     formData.append("file", files[0]);
      //     console.log("files", files, insert);
      //     // formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})

      //     // 把请求你们服务器地址获得的图片链接，替换到下面src里面即可
      //     data.editor.txt.append(
      //       "&lt;img src='https://rmxgh-1305579889.cos.ap-beijing.myqcloud.com/img/64bec1a86509170772c19fc5f88d84e1.jpg' /&gt;"
      //     );
      //   };

      data.editor.config.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "video", // 插入视频
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
      ];
      data.editor.config.uploadImgShowBase64 = true;
      data.editor.create();

      // data.getContent()
    });
    // const refData = toRefs(data);
    return {
      //   ...refData,
      ...toRefs(data),
      editorElemMenu,
      editorElemBody,
    };
  },
});
</script>
<style lang="less" scoped>
.part_right {
  width: 100%;
  background: #f2f2f2;
  min-height: 100vh;
}
.list {
  width: 96%;
  margin: 0 auto;
  /* background: gray; */
  padding-top: 50px;
}
/deep/.w-e-menu .w-e-panel-container {
  max-width: 100vw !important;
  transform: translateX(-50%);
  margin-left: 0 !important;
}
/deep/.w-e-toolbar {
  z-index: 9 !important;
}
/deep/.w-e-text-container {
  z-index: 8 !important;
}
@media screen and (max-width: 750px) {
  /deep/[data-title="代码"],
  /deep/[data-title="表情"],
  /deep/[data-title="图片"],
  /deep/[data-title="表格"],
  /deep/[data-title="视频"],
  /deep/[data-title="背景色"],
  /deep/[data-title="文字颜色"],
  /deep/[data-title="链接"] {
    position: unset;
  }
}
.list ul li {
  list-style-type: none;
  display: flex;
  border-bottom: 1px solid #e6e5e5;
  min-height: 50px;
  background: #d5d5d5;
}

.list ul li > div {
  flex: 1;
  line-height: 50px;
}

.list ol li {
  list-style-type: none;
  display: flex;
  border-bottom: 1px solid #e6e5e5;
  min-height: 30px;
}

.list ol li > div {
  flex: 1;
  line-height: 30px;
}

.flright {
  float: right;
  margin-right: 2%;
}
</style>
